<template>
  <div>
    <el-card>
      <el-button type="primary" icon="el-icon-plus" @click="handleAddRole">新增</el-button>
      <el-table :data="roleList" style="width: 100%; margin-top: 20px" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div v-if="scope.row.menu.length>0">
              <el-row v-for="(m,index) in scope.row.menu" :key="m.id" :class="['bottom',index === 0?'top':'']">
                <el-col :span="8">
                  <el-tag closable @click="removeMenu(scope.row,m.id)">{{ m.name }}</el-tag>
                  <i class="el-icon-caret-right" />
                </el-col>
                <el-col :span="12">
                  <el-tag v-for="mc in m.children" :key="mc.id" closable type="success" @click="removeMenu(scope.row,mc.id)">{{ mc.name }}</el-tag>
                </el-col>
              </el-row>
            </div>
            <div v-else>
              <el-empty :image-size="80" description="暂无权限" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" align="center" width="50px" />
        <el-table-column label="角色名称" prop="name" align="center" />
        <el-table-column label="角色详情" prop="desc" align="center" />
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDel(scope.row)">删除</el-button>
            <el-button type="warning" icon="el-icon-setting" @click="handleSet(scope.row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 分配角色弹框 -->
    <el-dialog title="分配权限" :visible.sync="setMenuVisible" width="30%" :before-close="handleMenuClose">
      <el-tree ref="treeRef" :data="menuList" :props="menuProps" show-checkbox :default-checked-keys="checkedNode" :default-expand-all="true" node-key="id" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleMenuClose">取 消</el-button>
        <el-button type="primary" @click="setMenu">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { role, delMenu, setRoleMenu } from '@/api/role'
import { menu } from '@/api/menu'
export default {
  name: 'RoleList',
  data() {
    return {
      roleList: [],
      setMenuVisible: false,
      menuList: [],
      menuProps: {
        children: 'children',
        label: 'name'
      },
      checkedNode: [], // 用户选中的节点
      roleId: null
    }
  },
  created() {
    this.getRoleList()
    this.getMenuList()
  },
  methods: {
    // 获取角色列表
    async getRoleList() {
      const res = await role()
      if (res.status !== 200) return this.$message.error(res.msg)
      this.roleList = res.data
    },
    // 删除角色下的权限
    async removeMenu(row, mid) {
      const result = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((e) => e)
      if (result === 'cancel') return this.$message.info('取消删除操作！')
      try {
        const res = await delMenu(row.id, mid)
        if (res.status !== 200) return this.$message.error('删除角色失败！')
        this.$message.success('删除角色成功！')
        console.log(row.menu)
        // eslint-disable-next-line require-atomic-updates
        row.menu = res.data
      } catch (error) {
        console.log(error)
      }
    },
    // 新增角色
    handleAddRole() {

    },
    // 编辑角色
    handleEdit() {

    },
    // 删除角色
    handleDel() {

    },
    // 分配角色
    handleSet(row) {
      this.getMenuList()
      this.setMenuVisible = true
      this.getMenuNode(row.menu)
      this.roleId = row.id
    },
    // 分配角色弹框关闭的回调
    handleMenuClose() {
      this.checkedNode = []
      this.setMenuVisible = false
    },
    // 获取树形菜单
    async getMenuList() {
      const res = await menu('tree')
      if (res.status !== 200) return this.$message.error('获取菜单列表失败！')
      this.menuList = res.data
    },
    // 获取单个角色权限的菜单集合
    getMenuNode(menu) {
      menu.forEach(item => {
        item.children.forEach(i => {
          this.checkedNode.push(i.id)
        })
      })
    },
    // 设置角色弹框确定按钮
    async setMenu() {
      const checkList = [...this.$refs.treeRef.getCheckedKeys(), ...this.$refs.treeRef.getHalfCheckedKeys()]
      const res = await setRoleMenu(JSON.stringify({ rid: this.roleId, mids: checkList.join(',') }))
      if (res.status !== 200) return this.$message.error('设置角色权限失败！')
      this.$message.success('设置角色权限成功！')
      this.handleMenuClose()
      this.getMenuList()
      this.getRoleList()
    }
  }

}
</script>

<style scoped>
.top {
  border-top: 1px solid #ccc;
}

.bottom {
  border-bottom: 1px solid #ccc;
}

.el-tag {
  margin: 10px;
  cursor: pointer;
}
</style>
